<template>
	<jk-dialog
		v-model="showDialog"
		title="复制-班组"
		width="760px"
		:append-to-body="true"
		:show-cancel-btn="false"
		:show-confirm-btn="false"
		@on-visible-change="onVisibleChange"
		@on-cancel="onVisibleChange(false)"
	>
		<header class="margin-bottom-10 flex-center">
			<el-button class="item-gap" type="primary" icon="el-icon-arrow-left" @click="onRunDate(-1)">前一天</el-button>
			<el-popover placement="bottom" trigger="click">
				<jk-date-picker v-model="searchParams.belongDate" :clearable="false" size="medium" @change="getDetailRequest"></jk-date-picker>
				<el-button slot="reference" class="item-gap" type="primary" icon="el-icon-date">{{ searchParams.belongDate || '日期' }}</el-button>
			</el-popover>
			<el-button type="primary" @click="onRunDate(1)">后一天<i class="el-icon-arrow-right el-icon--right"></i></el-button>
		</header>
		<div>班次/班组</div>
		<div v-loading="tableLoading" class="schedule-shift-container">
			<div
				v-for="(item, index) in ruleForm.scheduleShiftList"
				:key="index"
				class="schedule-shift-item"
			>
				<div class="schedule-shift-item-header">
					<span>{{ item.shiftName }}</span>
					<span class="schedule-shift-item-header-hour">({{ `${item.beginTime} ~ ${item.endTime}` }})</span>
				</div>
				<div class="schedule-shift-group-box">
					<el-button
						v-for="(groupItem, groupIndex) in item.scheduleGroupList"
						:key="groupIndex"
						:closable="false"
						effect="plain"
						:disabled="searchParams && searchParams.selectedIds ? searchParams.selectedIds.includes(groupItem.groupId) : false"
						:type="activeItem.id === groupItem.id ? 'primary' : 'default'"
						class="schedule-shift-group-item"
						@click="onSelectChange(groupItem)"
					>
						<div class="flex-center">
							<div
								class="radio-box"
								:style="{background: activeItem.id === groupItem.id ? '#2d8cf0' : ''}"
							></div>
							<span>{{ groupItem.groupName }}</span>
						</div>
					</el-button>
					<div v-if="!item.scheduleGroupList || !item.scheduleGroupList.length" class="no-data">暂无班组</div>
				</div>
			</div>
			<div v-if="!ruleForm.scheduleShiftList || !ruleForm.scheduleShiftList.length" class="no-data">暂无班次</div>
		</div>
		<div class="flex-center margin-top-20">
			<el-button size="medium" icon="el-icon-close" @click="onVisibleChange(false)">取消</el-button>
			<el-button size="medium" :disabled="!activeItem || !Object.keys(activeItem).length" icon="el-icon-check" type="primary" @click="onConfirmButton">确定</el-button>
		</div>
	</jk-dialog>
</template>
<script>
    import calDialogHeight from '../../../../mixins/cal-dialog-height';
    import { workforceManagementScheduleGetByWorkshopDate } from '../../../../api/schedule/scheduling';
    import { formatDate, throttle } from '../../../../utils/jk/jk-tool';
    export default {
        components: {
        },
        mixins: [calDialogHeight],
        props: {
            dialogState: {
                type: Boolean,
                default: false
            },
            params: {
                type: Object,
                default() {
                    return {};
                }
            }
        },
        data() {
            return {
                searchParams: {
                    selectedIds: [],
                    workshopId: '',
                    belongDate: ''
                },
                ruleForm: {},
                tableLoading: false,
                showDialog: false,
                activeItem: {}
            };
        },
        methods: {
            onRunDate: throttle((arg, _this) => {
                const e = arg[0];
                _this.$set(_this.searchParams, 'belongDate', formatDate(Date.parse(_this.searchParams.belongDate) + e * 24 * 60 * 60 * 1000));
                _this.getDetailRequest();
            }, 500),
            onSelectChange(groupItem) {
                if (this.activeItem.id === groupItem.id) {
                    this.activeItem = {};
                } else {
                    this.activeItem = groupItem;
                }
            },
            onSearchBtn() {
                this.getDetailRequest();
            },
            onConfirmButton() {
                this.$emit('on-confirm', JSON.parse(JSON.stringify(this.activeItem)));
            },
            onVisibleChange(e) {
                this.$emit('on-visible-change', e);
                if (!e) {
                    this.activeItem = {};
                }
            },
            getDetailRequest() {
                if (!this.searchParams.workshopId || !this.searchParams.belongDate) return;
                this.activeItem = {};
                this.tableLoading = true;
                return workforceManagementScheduleGetByWorkshopDate({
                    workshopId: this.searchParams.workshopId,
                    belongDate: this.searchParams.belongDate
                }).then(res => {
                    this.tableLoading = false;
                    if (res.data.status === 200) {
                        const resData = res.data.res || {};
                        resData.scheduleShiftList = resData.scheduleShiftList || [];
                        this.ruleForm = resData;
                    }
                });
            }
        },
        watch: {
            dialogState(newVal) {
                if (newVal) {
                    const cpData = this.params ? JSON.parse(JSON.stringify(this.params)) : {};
                    cpData.belongDate = cpData.belongDate ? formatDate(Date.parse(cpData.belongDate) - 24 * 60 * 60 * 1000) : '';
                    this.searchParams = cpData;
                    this.getDetailRequest();
                }
                this.showDialog = newVal;
            }
        }
    };
</script>
<style scoped lang="scss">
.no-data {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 13px;
    color: #808695;
}
.schedule-shift-container {
    min-height: 100px;
    border: solid 1px #eee;
    display: flex;
    align-items: center;
    .schedule-shift-item {
        width: 100%;
        border-right: solid 1px #eee;
        .schedule-shift-item-header {
            height: 42px;
            border-bottom: solid 1px #eee;
            background: #f8f8f9;
            line-height: 14px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            font-size: 14px;
            .schedule-shift-item-header-hour {
                font-size: 12px;
                color: #808695;
                margin-top: 2px;
            }
        }
        .schedule-shift-group-box {
            width: 100%;
            height: 200px;
            padding: 12px;
            box-sizing: border-box;
            position: relative;
            .no-group-data {

            }
            .schedule-shift-group-item {
                width: 100%;
                margin: 0 2px 2px 2px;
                display: flex;
                justify-content: center;
                align-items: center;
                .radio-box {
                    width: 14px;
                    height: 14px;
                    border: solid 1px #dcdee2;
                    border-radius: 50%;
                    background: #fff;
                    color: #2d8cf0;
                    margin-right: 2px;
                    position: relative;
                }
                .radio-box:before {
                    content: '';
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    margin-top: -2px;
                    margin-left: -2px;
                    width: 4px;
                    height: 4px;
                    background: #fff;
                    border-radius: 50%;
                }
            }
        }
    }
}
.schedule-shift-container .schedule-shift-item:last-child {
    border-right: none;
}
</style>
